import React from "react";
import { Divider,Image,Tag} from 'antd';
import {UpSquareOutlined,DownSquareOutlined} from '@ant-design/icons'
import LlxPlay from '../LlxPlay'
import classNames from "classnames";

const getSort = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']

const getValue = (value) => {
  switch (value) {
    case 1:
      return '听音选文'
    case 2:
      return '听音选图'
    case 3:
      return '看文选文'
    case 4:
      return '看文选图'
    case 5:
      return '看图选文'
    case 6:
      return '看图跟读'
    case 7:
      return '看文跟读'
    case 8:
      return '听音跟读'
    case 9:
      return '看文选音'
    case 10:
      return '听音选音'
    default:
      return
  }
}
const getTypeValue = (value) => {
  switch (value) {
    case 1:
      return '单选题'
    case 2:
      return '判断题'
    case 3:
      return '组合题'
    case 4:
      return '排序题'
    case 5:
      return '连线题'
    case 6:
      return '识读题'
    case 7:
      return '看图拼词'
    default:
        return
  }
}



const subjectComponent = (props) => {
  const {subjectItem,setShow,showMore} = props

  return <div className="subject-component">
  <div className="title">


  <h2 className="subject-head">
    {subjectItem.externalImport?<Tag color="success">外部导入</Tag>:''}{getTypeValue(subjectItem.type)} + {getValue(subjectItem.subjectType)}
    {
      showMore?<UpSquareOutlined onClick={()=>setShow(false)} className="look-more"/>:<DownSquareOutlined onClick={()=>setShow(true)}  className="look-more"/>
    }
  </h2>

    {
      showMore?<div className="more-subject  animate__animated animate__fadeIn">
      <div>
        <div>
         考点种类 + 考点 ：{
           subjectItem.examinationName&&subjectItem.examinationName.length?subjectItem.examinationName.map(i=>{
             return <Tag color="geekblue" key={i.examinationTypedName}>{i.examinationTypedName} +  {i.examination}</Tag>
           }): <Tag color="red">无考点</Tag>
         }
        </div>
         <div>
          标签：{
            subjectItem.labels&&subjectItem.labels.length?subjectItem.labels.map(i=>{
              return  <Tag color="green" key={i.labelName}>{i.labelName}</Tag>
            }): <Tag color="red">无标签</Tag>
          }
        </div>
       </div>
       <div>
         <div>
           题目引导 + 音频 ：{subjectItem.guideText} {
           subjectItem.guideAudio?<LlxPlay audioUrl={subjectItem.guideAudio}></LlxPlay>:''    
          }
         </div>
         <div>
           题目解析 + 音频 ：{subjectItem.analysisText} {
           subjectItem.analysisAudio?<LlxPlay audioUrl={subjectItem.analysisAudio}></LlxPlay>:''    
          }
         </div>
         <div>
           背景音效 ： {
           subjectItem.backgroundMusic?<LlxPlay audioUrl={subjectItem.backgroundMusic}></LlxPlay>:''    
          }
         </div>
       </div>
     </div>:''
    }
</div>

<Divider>题目</Divider>
<div className="subject-main">
  {
    subjectItem.type!==5?<div className={classNames(subjectItem.pictureUrl||!subjectItem.subjectName?"option-head":"option-head no-picture-text")}>
    
    {
      subjectItem.pictureUrl?<Image
      width={120}
      src={subjectItem.pictureUrl}
    />:''
    }
    
    {
      subjectItem.audioUrl||subjectItem.subjectName?<div className='option-text-song'>
      {
        subjectItem.audioUrl?<LlxPlay audioUrl={subjectItem.audioUrl}></LlxPlay>:''
      }
  
      {
        subjectItem.subjectName?<span className="text">
        {subjectItem.subjectName}
        </span>:''
      }
        
      </div>:''
    }
  </div>:''
  } 
  {/* 排序单选等.. */}
  {
    subjectItem.type!==5?<div className="option-main">
    {
     subjectItem.options?.map((i,j)=>{
        return  <div key={j} className={classNames(i.optionPicture||!i.optionName?"text-center":"text-center no-picture-text")}>
        {getSort[j]}&nbsp;&nbsp;
          
         {
           i.optionPicture?<Image
           width={120}
           src={i.optionPicture}
         />:''
         }
        
        {
           i.optionAudio||i.optionName?<div className='option-text-song'>
           {
              i.optionAudio?<LlxPlay audioUrl={i.optionAudio}></LlxPlay>:''
            }
  
            {
              i.optionName?<span className="text">
              {i.optionName}
              </span>:''
            }
           </div>:''
         }
     </div>
      })
    }
   </div>:<>
   <div className="option-main">
    {
     subjectItem.options.map((i,j)=>{
        return  <div key={j} className={classNames(i.optionPicture||!i.optionName?"text-center":"text-center no-picture-text")}>
         {getSort[j]}&nbsp;&nbsp;
          
          {
            i.optionPicture?<Image
            width={120}
            src={i.optionPicture}
          />:''
          }
         
         {
           i.optionAudio||i.optionName?<div className='option-text-song'>
           {
              i.optionAudio?<LlxPlay audioUrl={i.optionAudio}></LlxPlay>:''
            }
  
            {
              i.optionName?<span className="text">
              {i.optionName}
              </span>:''
            }
           </div>:''
         }
     </div>
      })
    }
  </div>

  <div className="option-main">
    {
     subjectItem.options.map((i,j)=>{
        return  <div key={j} className={classNames(i.pictureUrl||!i.optionValue?"text-center":"text-center no-picture-text")}>
        {getSort[j]}&nbsp;&nbsp;
          
          {
            i.pictureUrl?<Image
            width={120}
            src={i.pictureUrl}
          />:''
          }
         
       {
          i.audioUrl||i.optionValue?<div className='option-text-song'>
           {
              i.audioUrl?<LlxPlay audioUrl={i.audioUrl}></LlxPlay>:''
            }
  
            {
              i.optionValue?<span className="text">
              {i.optionValue}
              </span>:''
            }
           </div>:''
       }
     </div>
      })
    }
  </div>
   </>
  }
  
</div>


{
  subjectItem.type===6||subjectItem.type===2?'':<>
  <Divider>答案</Divider>
  <div className="subject-ansewer">
    <span>{subjectItem.answerList?subjectItem.answerList[0].answer:''}</span>
  </div>
  </>
}
{
  subjectItem.type===2?<>
  <Divider>答案</Divider>
    <div className="subject-ansewer">
    <span>{subjectItem.answerList?(subjectItem.answerList[0].answer==='true'?'正确':'错误'):''}</span>
  </div>
  </>:''
}
</div>
}

export default subjectComponent